	$(function() {
		//产品分类列表
		loadCpflData();
		//热门推荐
		loadRmtjData();
	});

	var baseUrl = "/apistore/";

	//产品分类列表
	function loadCpflData(){
		$.ajax({
			type: "POST",
			dataType: "JSON",
			url:baseUrl+'/categoryControler/selectByCpfl',
			contentType:'application/json;charset=UTF-8',
			success: function (result) {
				if(result!=null){
					//分类列表加载
					var str = "";
					for(var i=0;i<result.length;i++){
						if(i%2==0){ //偶数
							str+="<div class=\"main_content_middle_menu_introduce introduce-2\" categoryCode=\""+result[i].categoryCode+"\">"+result[i].categoryName+"</div>";
						}else{  //奇数
							str+="<div class=\"main_content_middle_menu_introduce introduce-1\" categoryCode=\""+result[i].categoryCode+"\">"+result[i].categoryName+"</div>";
						}

					}
					$("#cpfl").html(str);
				}else{
					$("#cpfl").html("暂无数据");
				}
			},
			error: function (result) {
			}
		});
	}



	//热门推荐
	function loadRmtjData(){
		$.ajax({
			type: "POST",
			dataType: "JSON",
			url:baseUrl+'/categoryControler/selectByServerHeaderTop4',
			contentType:'application/json;charset=UTF-8',
			success: function (result) {
				if(result!=null){
					//热门推荐加载
					var str = "";
					var id = "";
					for(var i=0;i<result.length;i++){
						if(i==0){
							id = "img0";
						}
						if(i==1){
							id = "img1";
						}
						if(i==2){
							id = "img2";
						}
						if(i==3){
							id = "img3";
						}
						str+="<div class=\"main_content_middle_recommend_bt_space\"></div>";
						str+="<div class=\"main_content_middle_recommend_bt_content\" serviceCode=\""+result[i].serviceCode+"\">";
						str+="<div class=\"main_content_middle_recommend_bt_iamge\" id=\""+id+"\"></div>";
						str+="<div class=\"main_content_middle_recommend_bt_words\">"+result[i].serviceName+"</div>";
						str+="</div>";
					}
					$("#rmtj").html(str);
					if(result!=null){
						for(var i=0;i<result.length;i++){
							//根据id给改变图片样式
							$("#img"+i+"").css("background-image","url("+baseUrl+"localImg/"+result[i].serviceImage+")");
						}
					}
				}else{
					$("#rmtj").html("暂无数据");
				}
			},
			error: function (result) {
			}
		});
	}

	//菜单分类链接跳转
	$(document).on("click",".main_content_menu_right_cpfl_button_content",function(e){
		var serverCode = $(this).attr("serviceCode");
		window.location.href=baseUrl+"apidetail?serviceCode="+serverCode;
	});

	//查看更多
	$(document).on("click","#ckgd",function(e){
		window.location.href=baseUrl+"apilist?categoryCode=&serverName=";
	});

	//更多
	$(document).on("click",".main_content_middle_menu_introduce_gd",function(e){
		window.location.href=baseUrl+"apilist?categoryCode=&serverName=";
	});

	//鼠标停留在更多隐藏分类菜单页
	$(document).on("mouseover",".main_content_middle_menu_introduce_gd",function(e){
		$(".main_content_menu_right_cpfl").hide();
		//$(".banner").show();
	});

	//API查看详情
	$(document).on("click",".main_content_middle_recommend_bt_content",function(e){
		var serverCode = $(this).attr("serviceCode");
		window.location.href="../../view/platform/API详情.html";
	});

	//鼠标悬停显示菜单页
	$(document).on("mouseover",".main_content_middle_menu_introduce",function(e){
		var menuTitle = $(this).text();
		var categoryCode = $(this).attr("categoryCode");

		$("#menu_title").text(menuTitle);  //标题赋值
		$.ajax({
			type: "GET",
			url:baseUrl+'/categoryControler/selectByServerHeaderMenuConetnt',
			data: "categoryCode="+categoryCode,
			contentType: "application/json", //必须有
			dataType: "json", //表示返回值类型，不必须
			success: function (result) {
				if(result!=null){
					//分类内容加载
					var str = "";
					for(var i=0;i<result.length;i++){
						str+="<div class=\"main_content_menu_right_cpfl_button_content\" serviceCode=\""+result[i].serviceCode+"\">"+isLengs(result[i].serviceName)+"</div>";
					}
					$("#menu_content").html(str);
				}else{
					$("#menu_content").html("暂无数据");
				}
			},
			error: function (result) {
			}
		});
		//$(".banner").hide();
		$(".main_content_menu_right_cpfl").show();
	});

	//鼠标移除隐藏菜单页
	$(document).on("mouseleave",".main_content_middle_menu",function(e){
		$(".main_content_menu_right_cpfl").hide();
		//$(".banner").show();
	});

	//分类点击事件
	$(document).on("click",".main_content_middle_menu_introduce",function(e){
		var categoryCode = $(this).attr("categorycode");
		window.location.href=baseUrl+"apilist?categoryCode="+categoryCode+"&serverName=";
	});

	//字体长度判断
	function isLengs(str){
		if(str.length>8){
			str = str.substring(0,8)+"..."
		}
		return str;
	}

	/******************************图片轮换*******************************/
	$.carousel = {
		now : 0,                    //当前显示的图片索引
		hasStarted : false,         //是否开始轮播
		interval : null,            //定时器
		liItems : null,             //要轮播的li元素集合
		len : 0,                    //liItems的长度
		aBox : null,                //包含指示器的dom对象
		bBox : null,                //包含前后按钮的dom对象

		/**
		 * 初始化及控制函数
		 * @param bannnerBox string 包含整个轮播图盒子的id或class
		 * @param aBox  string 包含指示器的盒子的id或class
		 * @param btnBox string 包含前后按钮的盒子的id或class
		 */
		startPlay : function(bannnerBox,aBox,btnBox) {
			//初始化对象参数
			var that = this;
			this.liItems = $(bannnerBox).find('ul').find('li');
			this.len = this.liItems.length;
			this.aBox = $(bannnerBox).find(aBox);
			this.bBox = $(bannnerBox).find(btnBox);
			//让第一张图片显示，根据轮播图数量动态创建指示器，并让第一个指示器处于激活状态，隐藏前后按钮
			this.liItems.first('li').css({'opacity': 1, 'z-index': 1}).siblings('li').css({'opacity': 0, 'z-index': 0});
			var aDom = '';
			for (var i = 0; i < this.len; i++){
				aDom += '<a></a>';
			}
			$(aDom).appendTo(this.aBox);
			this.aBox.find('a:first').addClass("indicator-active");
			this.bBox.hide();
			//鼠标移入banner图时，停止轮播并显示前后按钮，移出时开始轮播并隐藏前后按钮
			$(bannnerBox).hover(function (){
				that.stop();
				that.bBox.fadeIn(200);
			}, function (){
				that.start();
				that.bBox.fadeOut(200);
			});
			//鼠标移入指示器时，显示对应图片，移出时继续播放
			this.aBox.find('a').hover(function (){
				that.stop();
				var out = that.aBox.find('a').filter('.indicator-active').index();
				that.now = $(this).index();
				if(out!=that.now) {
					that.play(out, that.now)
				}
			}, function (){
				that.start();
			});
			//点击左右按钮时显示上一张或下一张
			$(btnBox).find('a:first').click(function(){that.next()});
			$(btnBox).find('a:last').click(function(){that.prev()});
			//开始轮播
			this.start()
		},
		//前一张函数
		prev : function (){
			var out = this.now;
			this.now = (--this.now + this.len) % this.len;
			this.play(out, this.now);
		},
		//后一张函数
		next : function (){
			var out = this.now;
			this.now = ++this.now % this.len;
			this.play(out, this.now);
		},
		/**
		 * 播放函数
		 * @param out number 要消失的图片的索引值
		 * @param now number 接下来要轮播的图的索引值
		 */
		play : function (out, now){
			this.liItems.eq(out).stop().animate({opacity:0,'z-index':0},500).end().eq(now).stop().animate({opacity:1,'z-index':1},500);
			this.aBox.find('a').removeClass('indicator-active').eq(now).addClass('indicator-active');
		},
		//开始函数
		start : function(){
			if(!this.hasStarted) {
				this.hasStarted = true;
				var that = this;
				this.interval = setInterval(function(){
					that.next();
				},5000);
			}
		},
		//停止函数
		stop : function (){
			clearInterval(this.interval);
			this.hasStarted = false;
		}
	};

	$(function(){
		$.carousel.startPlay('#J_bg_ban','#J_bg_indicator','#J_bg_btn');
	})

	/******************************图片轮换*******************************/